<template>
  <div class="container">
    <div id="map_container"></div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MapHeat",
  mounted() {
    var map = initMap();
    var point = new BMapGL.Point(112.541492, 27.7401911);
    map.centerAndZoom(point, 10);
    // var point = new BMapGL.Point(116.387456,39.925406);
    // map.centerAndZoom(point, 12);


    axios.get('http://127.0.0.1:9002/visualization/index/getFigureLocAndLat').then(res=>{
      const pointList = res.data.data.FigureLocAndLatList
      const view2 = new mapvgl.View({
        map:map
      })
      const data2 = []
      pointList.forEach(item=>{
        data2.push({
          geometry: {
            type: 'Point',
            coordinates: [item.lng,item.lat]
          },
          properties: {
            count: parseInt(4 * Math.random(), 10)
          }
        })
      })

      var heatmap2 = new mapvgl.HeatmapLayer({
        size: 600, // 单个点绘制大小
        max: 40, // 最大阈值
        height: 0, // 最大高度，默认为0
        unit: 'm', // 单位，m:米，px: 像素
        gradient: { // 对应比例渐变色
          0.25: 'rgba(0, 0, 255, 1)',
          0.55: 'rgba(0, 255, 0, 1)',
          0.85: 'rgba(255, 255, 0, 1)',
          1: 'rgba(255, 0, 0, 1)'
        }
      });
      view2.addLayer(heatmap2);
      heatmap2.setData(data2);

      console.log(data2)
      console.log(heatmap2)
      console.log(view2)
    })

    // var view = new mapvgl.View({
    //   map: map
    // });
    // fetch('../static/beijing.json').then(rs => {
    //   return rs.json();
    // }).then(rs => {
    //   console.log(rs)
    //   rs = rs.result.data[0].bound;
    //   var data = [];
    //   for (var i = 0; i < rs.length; i++) {
    //     var item = rs[i];
    //     data.push({
    //       geometry: {
    //         type: 'Point',
    //         coordinates: [item[0], item[1]]
    //       },
    //       properties: {
    //         count: item[2]
    //       }
    //     });
    //   }
    //   var heatmap = new mapvgl.HeatmapLayer({
    //     size: 600, // 单个点绘制大小
    //     max: 40, // 最大阈值
    //     height: 0, // 最大高度，默认为0
    //     unit: 'm', // 单位，m:米，px: 像素
    //     gradient: { // 对应比例渐变色
    //       0.25: 'rgba(0, 0, 255, 1)',
    //       0.55: 'rgba(0, 255, 0, 1)',
    //       0.85: 'rgba(255, 255, 0, 1)',
    //       1: 'rgba(255, 0, 0, 1)'
    //     }
    //   });
    //   view.addLayer(heatmap);
    //   heatmap.setData(data);
    //   console.log(data)
    //   console.log(view)
    // });
  }
}
</script>

<style scoped>

</style>
